<template>
  <none-data v-if="!flagUrl" />
  <!-- <web-view style="height: 80vh;" :src="flagUrl" bindmessage=""></web-view> -->
  <view class="agreement_box">
    <image class="agreement" :src="flagUrl" lazy-load="false"> </image>
  </view>

  <view class="room-btn">
    <view class="tips">
      <up-checkbox
        size="28rpx"
        :customStyle="{ marginBottom: '8px' }"
        label="我已仔细阅读本“租房意向书”,已知晓并接受所有条款"
        name="agree"
        @change="checkBoxChange"
      />
    </view>
    <button
      class="btn"
      @click="onSubmit"
      :disabled="!agreeCheckFlag || countDown > 0"
    >
      我已知晓
      <text class="countDown" v-if="countDown > 0"> ({{ countDown }}) </text>
    </button>
  </view>
</template>
<script setup>
import { ref, onUnmounted, onMounted } from "vue";
import { getDictConfigListByType } from "@/package_property/pages/api/home.js";
import { onShow } from "@dcloudio/uni-app";
import { customNav } from "@/utils/customNav";
import { getUrlParamsInH5, getUrlParamsInWeixin } from "../../../utils/utils";
const agreeCheckFlag = ref(false);
const flagUrl = ref("");
const payment = ref({});
const checkBoxChange = (e) => {
  agreeCheckFlag.value = e;
};
function onSubmit() {
  customNav(`application-payment?details=${JSON.stringify(payment.value)}`);
}
let countDownInterVal = "";
const countDown = ref(10);
const startCountDown = () => {
  countDownInterVal = setInterval(() => {
    if (countDown.value > 0) {
      countDown.value -= 1;
    } else {
      clearInterval(countDownInterVal);
    }
  }, 1000);
};
async function getOperationDetail() {
  const raw = await getDictConfigListByType("1808036629051879425");
  const tempFilePaths = raw.data[0];
  flagUrl.value = tempFilePaths.disposeResourceUrl;
  // uni.openDocument({
  //   filePath: tempFilePaths.disposeResourceUrl,
  //   fileType: "docx",
  //   success: function (res) {
  //     console.log("打开文档成功");
  //   },
  //   fail: function (err) {
  //     console.log("打开文档失败", err);
  //   },
  // });
}
onShow(() => {
  startCountDown();
  getOperationDetail();
  /* #ifdef MP-WEIXIN */
  payment.value = JSON.parse(getUrlParamsInWeixin()?.details);
  /* #endif */
  /* #ifdef H5 */
  payment.value = JSON.parse(getUrlParamsInH5()?.details);
  /* #endif */
  console.log("payment.value", payment.value);
});

onUnmounted(() => {
  clearInterval(countDownInterVal);
});
</script>

<style lang="less" scoped>
.tips {
  :deep(.u-checkbox) {
    width: 100%;
    height: 60rpx;
    padding-left: 50rpx;
    text {
      font-family: "ali-p";
      font-size: 23rpx !important;
      color: @color-black-text!important;
    }
  }
}
.agreement_box {
  width: 100vw;
  height: auto;
  .agreement {
    width: 100%;
    height: 2000rpx;
    object-fit: cover;
  }
}
</style>
